<template>
  <view>
    <calendar ref="calendar" :title="month.trainName" :selected="selected" @change="handleChange"></calendar>
    <view>
      <view class="day-count">
        <image
          src="../../static/icon/icon-time-solid.png"
          style="width: 30upx;height: 30upx;margin-right: 20upx;"
        />
        <view>{{countOfDay?('今日签到' + countOfDay + '次'):'今日暂未进行签到'}}</view>
      </view>
      <view v-if="info" style="padding: 20upx 30upx;">
        <view class="attendance-info" v-if="info.amSignInStatus">
          <view class="time-icon">上</view>
          <view>
            <view v-if="info.amSignInTime" class="time">签到时间 {{info.amSignInTime}}</view>
            <view class="attendance-tips" v-if="info.amSignInStatus == -1">未签到</view>
            <view class="attendance-tips" v-else-if="info.amSignInStatus == 0">迟到</view>
            <view class="attendance-tips" v-else-if="info.amSignInStatus == 1">正常</view>
          </view>
        </view>
        <view class="attendance-info" v-if="info.amSignOutStatus">
          <view class="time-icon">上</view>
          <view>
            <view v-if="info.amSignOutTime" class="time">签退时间 {{info.amSignOutTime}}</view>
            <view class="attendance-tips" v-if="info.amSignOutStatus == -1">未签退</view>
            <view class="attendance-tips" v-else-if="info.amSignOutStatus == 0">早退</view>
            <view class="attendance-tips" v-else-if="info.amSignOutStatus == 1">正常</view>
          </view>
        </view>
        <view class="attendance-info" v-if="pmSignInStatus">
          <view class="time-icon">下</view>
          <view>
            <view v-if="info.pmSignInTime" class="time">签到时间 {{info.pmSignInTime}}</view>
            <view class="attendance-tips" v-if="info.pmSignInStatus == -1">未签到</view>
            <view class="attendance-tips" v-else-if="info.pmSignInStatus == 0">迟到</view>
            <view class="attendance-tips" v-else-if="info.pmSignInStatus == 1">正常</view>
          </view>
        </view>
        <view class="attendance-info" v-if="pmSignOutStatus">
          <view class="time-icon">下</view>
          <view>
            <view v-if="info.pmSignOutTime" class="time">签退时间 {{info.pmSignOutTime}}</view>
            <view class="attendance-tips" v-if="info.pmSignOutStatus == -1">未签退</view>
            <view class="attendance-tips" v-else-if="info.pmSignOutStatus == 0">早退</view>
            <view class="attendance-tips" v-else-if="info.pmSignOutStatus == 1">正常</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {post_md5} from '../../common/request'

export default {
  data() {
    return {
      id: '',
      month: {},
      info: {},
      countOfDay: 0,
      label: [],
      selected: []
    }
  },
  onLoad(options) {
    this.id = options.id
    this.selected = [options.start, options.end]
    var time = new Date().getTime()
    this.getDayAttendance(time)
    this.getMonAttendance(time)
  },
  methods: {
    getDayAttendance(time) {
      const params = {
        trainId: this.id,
        userId: uni.getStorageSync('userId'),
        queryTime: time
      }
      post_md5('/train/getAttSheetInfoByUser', params).then(res => {
        if (res.data) {
          this.info = res.data.attSheet
          this.countOfDay = res.data.countOfDay
          return
        }
        this.info = {}
        this.countOfDay = 0
      })
    },
    getMonAttendance(time) {
      const params = {
        trainId: this.id,
        userId: uni.getStorageSync('userId'),
        queryTime: time
      }
      post_md5('/train/getTrainAttSheetByUser', params).then(res => {
        this.month = res.data
        for (let i in this.month.attSheetList) {
          this.label.push(this.month.attSheetList[i].dayOfMonth)
        }
        this.$refs.calendar.getData(this.label)
      })
    },
    handleChange(e) {
      var value = new Date(e).getTime()
      this.getDayAttendance(value)
    }
  }
}
</script>

<style>
.time-icon {
  background: #b3b3b3;
  width: 30upx;
  height: 30upx;
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
  line-height: 30upx;
  font-size: 12upx;
  margin-right: 20upx;
}

.day-count {
  background: #f8fafb;
  font-size: 28upx;
  color: #333333;
  padding: 30upx;
  display: flex;
  align-items: center;
}

.attendance-info {
  display: flex;
  align-items: center;
  font-size: 24upx;
  margin-bottom: 20upx;
}

.attendance-tips {
  height: 30upx;
  max-width: 74upx;
  line-height: 30upx;
  background: #02a8f4;
  border-radius: 40upx;
  color: #ffffff;
  font-size: 20upx;
  text-align: center;
  padding: 2upx 20upx;
}

.time {
  margin-bottom: 20upx;
}
</style>
